<template>
  <!-- 浅绿色背景、圆角、内边距 -->
  <view style="background: #55aa00; padding: 30rpx; margin: 20rpx 0; border-radius: 8rpx;">
    <!-- 子组件B标题：居中、加粗、大字号 -->
    <view style="font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 20rpx;">
      子组件B
    </view>
    <!-- CompA传值：Hello设为蓝色背景+白色文字 -->
    <view style="font-size: 28rpx; margin-bottom: 20rpx;">
      CompA组件传进来的值: 
      <text style="background: #1677ff; color: #fff; padding: 2rpx 8rpx; border-radius: 4rpx;">
        {{ comAValue }}
      </text>
    </view>
    <!-- 回传值区域 -->
    <view style="font-size: 28rpx; margin-bottom: 15rpx; display: flex; align-items: center;">
      <text>回传值: </text>
      <!-- 回传值输入框：默认填充截图内容 -->
      <input 
        type="text" 
        v-model="backValue" 
        style="background:#ccc;color:yellow; 1px solid #ccc; padding: 8rpx; margin-right: 10rpx; width: 400rpx;"
        value="0355-2765838"
      />
      <!-- 回传按钮：浅色背景 -->
      <button 
        type="default" 
        style="background: #fff; border: 1px solid #ccc; padding: 5rpx 20rpx; font-size: 26rpx;"
        @click="sendBackToParent"
      >
        回传
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    comAValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      backValue: '' // 初始回传值（对应截图）
    }
  },
  methods: {
    sendBackToParent() {
      this.$emit('callBackFun', this.backValue)
    }
  }
}
</script>

<style>
	
</style>